<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>钟表</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			html,body{height: 100%;overflow: hidden;}
			#clock{position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);background: url(img/钟表.png)no-repeat;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//钟表
				var clock=document.querySelector("#clock");
				if(clock.getContext){
					var ctx=clock.getContext("2d");
				}
				setInterval(function(){
					ctx.clearRect(0,0,clock.width,clock.height);
					move();
				},1000);
				move();
				function move(){
					ctx.save();
					ctx.lineWidth=3;
					ctx.strokeStyle="#383838";
					ctx.lineCap="round";
					ctx.translate(100,100);
					//先改变坐标系
					ctx.rotate(-90*Math.PI/180);
					ctx.beginPath();

					ctx.save();
					ctx.strokeStyle="#82440c";
					ctx.beginPath();
					ctx.arc(0,0,85,0,360);
					ctx.stroke();
					ctx.restore();
					//时针刻度
					ctx.save();
					ctx.strokeStyle="#e5aa74";

					for (var i=0;i<12;i++) {
						ctx.rotate(30*Math.PI/180);
						ctx.beginPath();
						ctx.moveTo(85,0);
						ctx.lineTo(72,0);
						ctx.stroke();
					}

					ctx.restore();

					//分针刻度
					ctx.save();
					ctx.strokeStyle="#e5aa74";
					ctx.lineWidth=4;
					for (var i=0;i<60;i++) {

						if(i%5!=0){
							ctx.beginPath();
							ctx.moveTo(80,0);
							ctx.lineTo(77,0);
							ctx.stroke();
						}
						ctx.rotate(6*Math.PI/180);
					}
					ctx.restore();


					//时针，分针，秒针，刻度盘
					var date=new Date();
					var s=date.getSeconds();
					var m=date.getMinutes()+s/60;
					var h=date.getHours()+m/60;
					h=h>12?h-12:h;

					//时针
					ctx.save();
					ctx.strokeStyle="#383838";
					ctx.lineWidth=4;
					ctx.rotate(h*30*Math.PI/180);
					ctx.beginPath();
					ctx.moveTo(0,0);
					ctx.lineTo(45,0)
					ctx.stroke();
					ctx.restore();

					//分针
					ctx.save();
					ctx.lineWidth=4;
					ctx.rotate(m*6*Math.PI/180);
					ctx.beginPath();
					ctx.moveTo(0,0);
					ctx.lineTo(56,0)
					ctx.stroke();
					ctx.restore();

					//秒针
					ctx.save();
					ctx.lineWidth=4;
					ctx.strokeStyle="orange";
					ctx.fillStyle="orange";
					ctx.rotate(s*6*Math.PI/180);
					ctx.beginPath();
					ctx.moveTo(0,0);
					ctx.lineTo(63,0)
					ctx.stroke();

					//表盘
					ctx.beginPath();
					ctx.arc(0,0,3,0,360*Math.PI/180);
					ctx.fill();

					//表头
					ctx.beginPath();
					ctx.arc(56,0,3,0,360*Math.PI/180);
					ctx.stroke();
					ctx.restore();

					ctx.restore();
				}
			}
		</script>
	</head>
	<body>
			<canvas id="clock" width="200" height="200"></canvas>
	</body>
</html>
